<template>
  <div>
    <div class="user-search" style="text-align: left">
      <el-input
        placeholder="用户名"
        suffix-icon="el-icon-date"
        v-model="param.username"
        style="width: 200px"
      ></el-input>
      <el-input
        placeholder="姓名"
        suffix-icon="el-icon-date"
        v-model="param.realName"
        style="width: 200px"
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="findUserList()">搜索</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">新增</el-button>
    </div>
    <!-- 用户数据table -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="user-table-expand">
            <el-form-item label="用户名">
              <span>{{ props.row.username }}</span>
            </el-form-item>
            <el-form-item label="密码">
              <span>{{ props.row.password }}</span>
            </el-form-item>
            <el-form-item label="姓名">
              <span>{{ props.row.realName }}</span>
            </el-form-item>
            <el-form-item label="性别">
              <span>{{ props.row.sex }}</span>
            </el-form-item>
            <el-form-item label="邮箱">
              <span>{{ props.row.email }}</span>
            </el-form-item>
            <el-form-item label="电话">
              <span>{{ props.row.tel }}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.createTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="真实姓名" prop="realName"></el-table-column>
      <el-table-column label="电话" prop="tel"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="param.currentPage"
      :page-sizes="[2, 5, 8, 10]"
      :page-size="param.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="param.total"
    ></el-pagination>
    <!-- 新增用户dialog -->
    <el-dialog title="新增用户" :visible.sync="dialogFormVisible" center width="30%">
      <el-form :model="form">
        <el-form-item
          label="用户名"
          :label-width="formLabelWidth"
          :rules="[
              { required: true, message: '请输入用户名', trigger: 'blur' }
          ]"
        >
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          :rules="[
              { required: true, message: '请输入密码', trigger: 'blur' }
          ]"
        >
          <label slot="label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          :rules="[
              { required: true, message: '请输入真实姓名', trigger: 'blur' }
          ]"
        >
          <label slot="label">姓&nbsp;&nbsp;&nbsp;&nbsp;名</label>
          <el-input v-model="form.realName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          :rules="[
              { required: true, message: '请输入电话', trigger: 'blur' }
          ]"
        >
          <label slot="label">电&nbsp;&nbsp;&nbsp;&nbsp;话</label>
          <el-input v-model="form.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="email"
          :label-width="formLabelWidth"
          :rules="[
              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ]"
        >
          <label slot="label">邮&nbsp;&nbsp;&nbsp;&nbsp;箱</label>
          <el-input v-model="form.email"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 查询条件 分页参数 后台使用pageHelper物理分页
      param: {
        username: "",
        realName: "",
        pageSize: 5,
        currentPage: 1,
        total: 0
      },
      // 新增
      dialogFormVisible: false,
      formLabelWidth: "100px",
      form: {
        username: "",
        password: "",
        realName: "",
        tel: "",
        email: ""
      },
      tableData: []
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delUser(row.id);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.findUserList();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 改变每页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.param.pageSize = val;
      this.findUserList();
    },
    // 改变当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.param.currentPage = val;
      this.findUserList();
    },
    // 新增用户
    addUser() {
      this.$axios
        .post("/user/add", JSON.stringify(this.form))
        .then(response => {
          console.log(response);
          this.dialogFormVisible = false;
          this.$message({
            showClose: true,
            message: "保存成功！",
            type: "success"
          });
          // 刷新表格
          this.findUserList();
        })
        .catch(error => {
          console.log(error);
          this.$message({
            showClose: true,
            message: "保存失败！",
            type: "error"
          });
        });
    },
    // 查询用户
    findUserList() {
      this.$axios
        .post("/user/findList", JSON.stringify(this.param))
        .then(response => {
          console.log(response);
          this.tableData = response.data.list;
          this.param.total = response.data.total;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 删除用户
    delUser(id) {
      this.$axios.post("/user/delUserById", JSON.stringify({"id":id}))
      .then(response => {
        console.log(response)
      })
      .catch(error => {
        console.log(error)
      })
    
    }
  },
  // 初始化渲染表格
  created() {
    this.findUserList();
  }
};
</script>
<style scoped>
.user-table-expand {
  font-size: 0;
}
.user-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.user-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>